<template>
  <div class="total">
    <header class="header">
        <img src="../../../assets/images/logo.png" class="logo" @click="HomePage">
        <ul>
          <li><router-link to="/agriculture">农作物种植厂家</router-link></li>
          <li><router-link to="/resources">品种资源</router-link></li>
          <li><router-link to="/case">精选案例</router-link></li>
        </ul>
    </header>
    <div class="recommend">
        <div class="commodity">
            <h5>商品推荐</h5>
            <el-row :gutter="24" style="margin: 0px;">
                <el-col :span="5" style="padding: 0px;" v-for="(goods, index) in GoodList" :key="index">
                    <img :src="goods.image" alt="">
                    <span>{{ goods.price }}</span>
                    <p style="margin: 10px;">{{ goods.intrduce }}</p>
                    <span>{{ goods.style1 }}</span>
                </el-col>
            </el-row>
        </div>
        <div class="factory">
            <h5>厂家推荐</h5>
            <el-row :gutter="24" style="margin: 0px;">
                <el-col :span="22" style="padding: 0px;" v-for="(factory, index) in FactoryList" :key="index">
                  <img :src="factory.image">
                  <h3 class="name">{{ factory.name }}</h3>
                  <el-button type="success" plain class="button" style="float: right; margin: auto 30px;">进入店铺</el-button>
                  <span style="display: block; margin: 20px;">{{ factory.style }}</span>
                  <el-row :gutter="24" style="height: 170px; width: 60%;">
                    <el-col :span="8" style="border: 0px; margin:20px auto">
                        <el-statistic title="成立时间">
                            <template slot="formatter">
                            2022-08-30
                            </template>
                        </el-statistic>
                    </el-col>
                    <el-col :span="8" style="border: 0px; margin:20px auto">
                        <el-statistic title="注册资本">
                            <template slot="formatter">
                            500万元
                            </template>
                        </el-statistic>
                    </el-col>
                    <el-col :span="8" style="border: 0px; margin:20px auto">
                        <el-statistic title="主要品牌">
                            <template slot="formatter">
                            佰农、佰农温室
                            </template>
                        </el-statistic>
                    </el-col>
                </el-row>
                  <span style="margin: 20px;">主营：</span>
                  <span>{{ factory.text }}</span>
                </el-col>
            </el-row>
        </div>
    </div>
    <div class="foot">
      <span>XXX提供技术支持</span>
    </div>
    <Foot></Foot>
  </div>
</template>

<script>
import Foot from '@/components/Footer'
export default {
    name: 'MyResources',
    components:{
          Foot
      },
    data() {
      return {
        GoodList:[
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
          {
            image: require("@/assets/images/goods1.png"),
            price: '￥180.00/吨',
            intrduce: '赢胜 发酵纯羊粪 果蔬种植不烧苗 纯度高农作物 园林绿化 果园',
            style1: '氮磷钾 有机肥',
          },
        ],
        FactoryList:[
          {
            image: require("@/assets/images/factory.png"),
            name: '天锡佰农温室工程有限公司',
            style: '实力公司',
            text: '蔬菜大棚 温室大棚 单体大棚 连体大棚'
          },
          {
            image: require("@/assets/images/factory.png"),
            name: '天锡佰农温室工程有限公司',
            style: '实力公司',
            text: '蔬菜大棚 温室大棚 单体大棚 连体大棚'
          },
          {
            image: require("@/assets/images/factory.png"),
            name: '天锡佰农温室工程有限公司',
            style: '实力公司',
            text: '蔬菜大棚 温室大棚 单体大棚 连体大棚'
          },
          {
            image: require("@/assets/images/factory.png"),
            name: '天锡佰农温室工程有限公司',
            style: '实力公司',
            text: '蔬菜大棚 温室大棚 单体大棚 连体大棚'
          },
        ]
      }
    },
    methods:{
      HomePage(){
        this.$router.push('/home')
      }
    }
    
}
</script>

<style lang="scss" scoped>
h5{
        font-size: 1.3rem;
        padding: 10px 20px;
        margin: auto;
}
a{
  text-decoration: none;
}
li{
  float: left;
  list-style: none;
}
 .total{
      padding: 0;
      margin: 0;
      height: auto;
      width: 100%;
      background: url(../../../assets/images/green.png) no-repeat fixed;
      background-size: cover;
  }
  .header{
      top: 0;
      height: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
  
      .logo{
          width: 250px;
          height: auto;
          margin-left: 3%;
      }
  
      ul{
        width: 70%;
        margin: 0 auto;

        li{
          width: 30%;
          height: 100%;
          float: left;
          list-style: none;
          margin: 0 5px;

          a{
            display: block;
            line-height: 80px;
            color: #666a66;
            font-size: 1.15rem;
          }
          a:hover{
            color: #fff;
          }
        }
      }
  }
  .recommend{
    width: 80%;
    margin: 20px auto;
    
    .commodity{
        width: 100%;
        margin: 10px 5px;
        background-color: #fff;
        border-radius: 8px;

        .el-col{
            height: auto;
            margin: 10px 20px;
            border: 1px solid #e8e8e8;

            img{
                width: 100%;
            }
            span{
              display: block;
              margin: 5px 10px;
            }
        }
    }

    .factory{
        width: 100%;
        margin: 10px 5px;
        background-color: #fff;
        border-radius: 8px;

        .el-col{
          height: auto;
          margin: 10px 20px;
          border: 1px solid #e8e8e8;

          img{
            float: right;
            margin: 10px;
            height: 300px;
          }
          .name{
            margin: 20px;
            color: #638583;
          }
        }
    }
  }
  .foot{
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  text-align: center;
  color: rgb(117, 134, 151);;
}

</style>